<template>
	<view class="commodity" :class="{'container':show}">
		<!-- 轮播图 -->
		<view class="swiper-section">
			<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" indicator-active-color="#fff">
				<swiper-item v-for="(item, index) in dataList.image" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="commodity-info">
			<view class="info-top">
				<view class="title-box">
					<view class="title">
						{{ dataList.title }}
					</view>
					<!-- <view class="share"><image src="../../static/img/share.png" mode=""></image></view> -->
				</view>
				<view class="subhead">{{ groudList.description }}</view>
				<view class="price">
					<view class="">
						<text>￥{{ price }}</text>
						<text></text>
						<text>￥{{ oprice }}</text>
					</view>
				</view>
				<view v-if="discount != null">
					<view class="discountPrice" v-if="discount.discount_ratio != 0">
						<view class="">{{ discount.level_name }}下单享{{ discount.discount_ratio }}折</view>
						<view class="">优惠价:￥{{ discountPrice }}</view>
					</view>
				</view>
				<view v-if="discount != null">
					<view class="discountPrice" v-if="discount.discount_price != 0">
						<view class="">{{ discount.level_name }}下单减{{ discount.discount_price }}元</view>
						<view class="">优惠价:￥{{ discountPrice2 }}</view>
					</view>
				</view>
				<view class="count">
					<view>已售{{ dataList.number_sales }}件</view>
					<view>库存{{ dataList.number_stock }}件</view>
				</view>
			</view>
			<view class="info-intro">
				<view class="type">
					<view>
						<text>运费</text>
						<text>{{ dataList.price_express }}</text>
					</view>
				</view>
			</view>

			<view class="info-intro" v-if="hasCoupon">
				<view class="type" style="display: flex;justify-content: space-between;width: 100%;" @click="show=!show">
					<view style="display: flex;align-items: center;">
						<text>优惠券</text>
						<view class="discount-bg" v-for="(item,index) in couponList.slice(0,4)" :key="index">
							<view class="icons" v-if="item.type==1">￥</view>
							<view v-if="item.type==1">{{Number(item.discount)}}</view>
							<view v-if="item.type==2">
								{{item.discount*10}}
							</view>
							<view class="icons" v-if="item.type==2">折</view>
						</view>
					</view>
					<!-- <image style="width: 32upx;height: 32upx;" src="../../static/img/right.png" mode=""></image> -->
					<text class="mallicon icon-xiangyou"></text>
				</view>
			</view>

			<!-- 商品详情评价 -->
			<view class="info-detail-evaluate" :style="{ height: height + 'px' }">
				<view class="navbar">
					<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabIndex === index }"
					 @click="tabClick(index)">{{ item.text }}</view>
				</view>
				<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
					<swiper-item class="tab-content">
						<scroll-view class="list-scroll-content" scroll-y>
							<!-- 详情 -->
							<rich-text :nodes="dataList.content"></rich-text>
						</scroll-view>
					</swiper-item>
					<swiper-item class="tab-content">
						<scroll-view class="list-scroll-content" scroll-y>
							<!-- 评价 -->
							<view class="evaluate" v-if="goodComment.length != 0">
								<!-- <view class="title">用户评价 （{{ groudList.comment_num }}）</view> -->
								<view class="title">用户评价</view>
								<view class="user-info" v-for="(item, index) in goodComment" :key="index">
									<view class="photo">
										<image :src="item.avatar" mode=""></image>
									</view>
									<view class="info">
										<view class="user-name">
											<view class="name">
												<view  style="margin-bottom: 20upx;">{{ item.nickname }}</view>
												<uni-rate disabled="true" :value="item.score" size="14" margin="2"></uni-rate>
											</view>
											<view class="time">{{ item.createtime }}</view>
										</view>

										<view class="content">{{ item.content }}</view>
										<view class="img">
											<view v-for="(it, idx) in item.image" :key="idx">
												<image :src="it" mode=""></image>
											</view>
										</view>

										<!-- <view class="merchant">{{ item.reply_content }}</view>
										<view class="img">
											<view v-for="(item, index) in imgList.reply_images" :key="index">
												<image :src="item" mode=""></image>
											</view>
										</view> -->
										<!-- <view class="add-comment">用户{{ item.count }}天后追评</view>
										<view class="comment-list">
											{{ item.append_content }}
											<view class="img">
												<view class="img" v-for="(item, index) in imgList.append_images" :key="index">
													<image :src="item" mode=""></image>
												</view>
											</view>
										</view>
										<view class="merchant">
											{{ item.append_reply_content }}
											<view class="img" style="margin-bottom: 100upx;">
												<view v-for="(item, index) in imgList.append_reply_images" :key="index">
													<image :src="item" mode=""></image>
												</view>
											</view>
										</view> -->
									</view>
								</view>
							</view>
							<view class="not-data" v-else>暂无评价</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 底部 -->
			<view class="btn">
				<view class="to">
					<view class="home" @click="jumpUrl('/pages/tabBar/home')" v-if="isStoreShow==false">
						<view class="">
							<image src="../../static/1tab-home.png" mode=""></image>
						</view>
						<view class="">首页</view>
					</view>
					<view class="home" @click="jumpUrlTwo('/pages/myShop/shopHome?merch_id='+dataList.merch_id)" v-if="isStoreShow">
						<view class="store-icon">
							<image src="../../static/1tab-home-current.png" mode=""></image>
						</view>
						<view class="">店铺</view>
					</view>
					<view class="home">
						<view class="" @click="jumpUrl('/pages/tabBar/cart')">
							<image src="../../static/1tab-cart.png" mode=""></image>
						</view>
						<view class="">购物车</view>
					</view>
				</view>
				<!-- <view class="conversion" @click="jump('/pages/createOrder/createOrder?goodsid=' + id, id)">我要开团</view> -->
				<!-- yc -->
				<!-- @click="selType = !selType" @click="jump('/pages/createOrder/createOrder?goodsid=' + id, id)" -->
				<view v-if="dataList.canAddCart == false">
					<view class="conversion" v-if="dataList.canAddCart == true" style="background-color: #ffdee6;color: #f81149;"
					 @click="toggleSpec(1)">加入购物车</view>
					<view class="conversion1" @click="toggleSpec(2)">立即购买</view>
				</view>
				<!-- @click="jump('/pages/createOrder/createOrder?goodsid=' + id, id)" -->
				<view v-if="dataList.canAddCart == true">
					<view class="conversion" style="background-color: #ffdee6;color: #f81149;" @click="toggleSpec(1)">加入购物车</view>
				</view>
				<view v-if="dataList.canAddCart == true">
					<view class="conversion" @click="toggleSpec(2)">立即购买</view>
				</view>
				<!-- <view class="conversion" v-if="dataList.canBuy==true" @click="toggleSpec(2)" >立即购买</view> -->
				<view v-if="dataList.canBuy == false">
					<view class="conversion1" v-if="dataList.canAddCart == true" style="background-color: #ffdee6;color: #f81149;"
					 @click="toggleSpec(1)">加入购物车</view>
					<view class="conversion" v-if="dataList.canBuy == true" @click="toggleSpec(2)">立即购买</view>
				</view>
			</view>
		</view>
		<!-- 规则选择 -->
		<!-- <view class="ele" :class="{ block: selType }" @click.self="selType = !selType">
			<view class="box" :class="{ active: selType }" v-for="(item, index) in specs" :key="index">
				<view class="photo">
					<image src="../../static/img/points/commodity.png" mode=""></image>
					<view class="price">
						<view>￥1299.00</view>
						<view>已选：皇妃品种20g</view>
					</view>
				</view>

				<view class="type">
					<view v-for="(it, idx) in specs" :key="idx">
						<view class="tilte">{{ it.name }}</view>
						<view class="name">
							<view style="margin-right: 20upx;" v-for="(item, index) in it.list" :key="index" :class="{ active: item.id == typeIndex }"
							 @click="eleType(item.id)">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="count">
					<view class="sum">数量</view>
					<view class="num">
						<text style="width: 30rpx;text-align: center;" @click="count--">-</text>
						<view class="">{{ count }}</view>
						<text style="width: 30rpx;text-align: center;" @click="count++">+</text>
					</view>
				</view>

				<view class="btn" @click="pay">立即购买</view>
				<view class="btn" @click="cartConfirm(item.id)" v-if="type == 1">确定</view>
			</view>
		</view>
 -->

		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec(num)">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="dataList.logo" class="logo-img"></image>
					<view class="right">
						<text class="price">¥{{ price }}</text>
						<!-- <text class="price">¥{{goodList.price_market}}</text> -->
						<!-- <text class="stock">库存：{{goodList.number_stock}}</text> -->
						<view class="selected">
							{{ txt }}
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem.name }}</text>
							<!-- <text>{{numberValue}}件</text> -->
						</view>
					</view>
				</view>
				<view v-for="(item, index) in specList" :key="index" class="attr-list">
					<text>{{ item.name }}</text>
					<view class="item-list">
						<text v-for="(childItem, childIndex) in item.list" v-if="childItem.pid === item.id" :key="childIndex" class="tit" :class="childIndex == specificationSelected ? 'selected' : '' " @click="selectSpec(index, childIndex, childItem.id)">
							{{ childItem.name }}
						</text>
					</view>
				</view>

				<view class="num-value">
					<view class="text">数量</view>
					<view>
						<uni-number-box :min="1" :max="dataList.number_stock" :value="numberValue" @change="change" />
					</view>
				</view>
				<!-- 添加购物车 -->
				<button class="btn" @click.stop="addcard(dataList.id)" v-if="num == 1">确定</button>
				<!-- 直接到订单页面 -->
				<!-- <button class="btn" @click.stop="jump('/pages/category/createOrder')" v-if="num == 2">确定</button> -->
				<!-- 新 -->
				<button class="btn" @click.stop="jump('/pages/order/placeOrder')" @click="buy" v-if="num == 2">确定</button>
			</view>
		</view>
		<view class="popup1" v-if="show">
			<view class="mask" @click="show=!show"></view>
			<view class="shade">
				<view class="list">
					<view class="box" v-for="(item,index) in couponList" :key="index">
						<view class="content">
							<view class="box-left" v-if="item.type==1&&item.is_receive!=1">
								<text class="icon">￥</text>
								<view class="num">
									{{Number(item.discount)}}
								</view>
							</view>
							<view class="box-left2" v-if="item.type==1&&item.is_receive==1">
								<text class="icon">￥</text>
								<view class="num">
									{{Number(item.discount)}}
								</view>
							</view>
							<view class="box-left" v-if="item.type==2&&item.is_receive!=1">
								<view class="num">
									{{item.discount*10}}
								</view>
								<text class="icon">折</text>
							</view>
							<view class="box-left2" v-if="item.type==2&&item.is_receive==1">
								<view class="num">
									{{item.discount*10}}
								</view>
								<text class="icon">折</text>
							</view>
							<view class="right">
								<view class="box-center">
									<view class="text">
										{{item.title}}
									</view>
									<view class="time">
										{{item.use_starttime}}~{{item.use_endtime}}
									</view>
								</view>
								<view class="box-right">
									<view class="text" v-if="item.is_receive!=1" @click="receive(item.id)">
										领取
									</view>
									<view class="text2" v-else @click="receive(item.id)">
										已领取
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cancel" @click="show=!show">
						<view class="">
							暂时不需要~
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCountdown from '@/components/uni-countdown.vue';
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		data() {
			return {
				price: 0,
				oprice: 0,
				tabIndex: 0,
				selType: false,
				typeIndex: 0,
				count: 1,
				id: 2,
				gid: 0,
				height: 0,
				groudList: [],
				groudSwiper: [],
				groudAvatar: [],
				groudTeam: [],
				goodComment: [],
				imgList: [],
				specs: [],
				type: 0,
				num: 1,
				numberValue: 1,
				specClass: 'none',
				specSelected: [],
				specList: [],
				specChildList: [],
				title: '商品详情',
				isStoreShow: true, //是否显示店铺
				icon: '/static/icon/left.png',
				url_left: '',
				/* /pages/life/shop */
				dataList: '',
				// imgList: [],
				goodList: [],
				datagoods: [],
				is_collection: '',
				discount: '',
				discountPrice: '',
				discountPrice2: '',
				number_sales: '',
				txt: '已选：',
				// 优惠券
				show: false,
				hasCoupon: false,
				couponList: [],
				listData: [{
					discount: 5,
					time: '2020.10.27 ~ 2020.10.30'
				}],
				navList: [{
						text: '商品详情',
						state: '0'
					},
					{
						text: '商品评价',
						state: '1'
					}
				],
				specificationSelected:0//规格选择
			};
		},
		components: {
			uniCountdown,
			uniRate
		},
		onLoad: function(e) {
			console.log('/pages/product/detail??id=${item}',e);
			let self = this;
			self.gid = e.goods;
			// self.$http.member.info().then(info => {
			self.getGoodsDetail();
			self.getGoodsComment();
			// });
			// self.getGroupList();

			var height = uni.getSystemInfoSync().windowHeight - 50;
			self.height = height;
			// self.goodList.price_market=self.goodList.price_market
			// console.log(self.goodList.price_market,345);
			// self.minhei = uni.getSystemInfoSync().windowHeight - 40
		},
		methods: {
			// 领取优惠券
			receive(id) {
				var self = this;
				self.$Request.post(self.$api.discount.receiveCoupon, {
						id: id
					})
					.then(function(res) {
						console.log(res, 3456789);
						if (res.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.info
							})
							setTimeout(function() {
								self.show = false
								self.getGoodsDetail();
							}, 500)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.info
							})
						}
					});
			},
			stopPrevent() {},
			jumpUrl(url) {
				uni.switchTab({
					url: url
				});
			},
			jumpUrlTwo(url) {
				uni.navigateTo({
					url: url
				});
			},
			changeTab(e) {
				this.tabClick(e.target.current);
			},
			tabClick(index) {
				this.tabIndex = index;
			},
			eleType(index) {
				console.log(index);
				this.typeIndex = index;
			},
			//立即购买
			pay() {
				console.log(this.count);
				uni.navigateTo({
					url: './createOrder'
				});
			},
			addCart() {
				var self = this;
				this.type = 1;
				this.selType = !this.selType;
			},
			// cartConfirm() {
			// 	// console.log(self.gid, 555);
			// 	var self = this;
			// 	// console.log(self.id,233);
			// 	self.$Request.post(self.$api.prodect.addToCart, {
			// 			// goodsid: self.gid,
			// 			goodsid: self.gid,
			// 			optionid: 20,
			// 			total: self.count
			// 		})
			// 		.then(function(res) {
			// 			if (res.code == 0) {
			// 				// console.log(res, 77777);
			// 				self.selType = !self.selType;
			// 				uni.showToast({
			// 					icon: 'none',
			// 					title: res.info
			// 				});
			// 				// uni.showToast({
			// 				// 	icon:'none',
			// 				// 	title:res.info
			// 				// })
			// 			}

			// 			// var list = res.data.data;
			// 			// self.goodComment = list;
			// 		});
			// },
			getGoodsDetail() {
				var self = this;
				self.$Request.post(self.$api.prodect.getGoodsDetail, {
						goodsid: self.gid
					})
					.then(function(res) {
						if (res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: res.info
							})
						} else {
							self.dataList = res.data;
							self.dataList.merch_id == 0 ? (self.isStoreShow = false) : (self.isStoreShow = true)
							self.goodList = res.data;
							if (res.data.coupon) {
								self.couponList = res.data.coupon
								self.hasCoupon = true
							}

							console.log(self.couponList, 123);
							self.imgList = res.data.logo;
							self.is_collection = res.data.is_collection;
							self.discount = res.data.discount;
							self.merch_id = self.dataList.merch_id
							console.log(self.merch_id, 233);
							console.log(self.discount, 789);
							self.price = res.data.list[0].price_market;
							self.oprice = res.data.list[0].price_cost;
							self.number_sales = res.data.list[0].number_virtual;
							if (self.discount != null) {
								self.discountPrice = self.price * (self.discount.discount_ratio / 10);
								self.discountPrice2 = self.price - self.discount.discount_price;
							}

							// console.log(self.discountPrice2, 888);
							// console.log(self.discountPrice, 111);
							let list = res.data.specs;
							// console.log('dsasa', list)
							self.specSelected = [];
							for (let i = 0; i < list.length; i++) {
								list[i].id = i;
								list[i].list.forEach(item => {
									item.selected = false;
									item.pid = i;
								});

								// console.log(list[i].list[0])

								self.specSelected.push(list[i].list[0]);
								console.log(self.specSelected)
								// console.log(self.specSelected.push(list[i].list[0]),123456);
								// console.log('push',self.specSelected)
								list[i].list[0].selected = true;
							}
							self.specList = list;
							// console.log('123132',res.data.list)
							self.listgoods = res.data.list;
							self.goodList = self.listgoods[0];
							// console.log(self.goodList)
							let lists = res.data.lists;
							lists.forEach(item => {
								console.log('666999呵呵哒',item)
								var text = '';
								var data = [];
								item.forEach(li => {
									if (text != '') {
										var num = ';;' + li.group + '::' + li.name;
									} else {
										var num = li.group + '::' + li.name;
									}
									text += num;
								});
								data = {
									data: item,
									title: text,
									status: item[0].status
								};
								self.datagoods.push(data);
							});
							uni.setStorageSync('order_data', res.data);
						}

					});
			},
			getGoodsComment() {
				var self = this;
				// console.log(self.gid, 666);
				self.$Request.post(self.$api.prodect.getGoodsComment, {
						goodsid: self.gid
					})
					.then(function(res) {
						// console.log(res);
						var list = res.data.data;
						self.goodComment = list;
						// 	console.log(list.list,234);
						// 	list.list.forEach(item=>{
						// 		// console.log(item);
						// 		self.goodDetail.price=item.price_market[0]
						// 		console.log(self.goodDetail.price);
						// 		self.goodDetail.oprice=item.price_original[0]
						// 		console.log(self.goodDetail.oprice);
						// 	})
					});
			},
			change(value) {
				this.numberValue = value;
			},
			// 规格弹窗开关
			toggleSpec(num) {
				console.log(num, 123);
				//this.specClass = !this.specClass;
				this.num = num;
				if (this.specClass === 'show') {
					this.specClass = 'hide';

					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			//选择规格
			selectSpec(index, idx, pid) {
				console.log('选择规格选择规格选择规格',index, idx, pid)
				// 临时使用做判断，是否执行下一步操作
				
				
				
				
				this.specificationSelected = idx
				let list = this.specList;
				list[index].list.forEach(item => {
					this.$set(item, 'selected', false);
				});
				this.$set(list[index].list[idx], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				//this.specSelected = [];
				var data = [];
				var datas = this.specSelected;
				var text = '';
				this.specList.forEach(item => {
					item.list.forEach(li => {
						if (li.selected == true) {
							if (text != '') {
								var num = ';;' + li.group + '::' + li.name;
							} else {
								var num = li.group + '::' + li.name;
							}
							text += num;
							data.push(li);
						}
					});
				});
				console.log(this.datagoods,2222,data)
				var status = 0;
				this.datagoods.forEach(item => {
					console.log(text,666666,item)
					if (item.title == text) {
						if (item.status == true) {
							status = 1;
							/* this.goodList = item; */
						}else{
							this.$utils.showMsg('该商品已售罄');
							return
						}
					}
				});
				if (data.length == this.specList.length) {
					if (status == 0) {
						this.specSelected = datas;
						this.$set(list[index].list[idx], 'selected', false);
					} else {
						this.specSelected = data;
						this.listgoods.forEach(item => {
							// console.log(item, 1111);
							if (item.goods_spec == text) {
								// console.log(item.goods_spec,text)
								console.log('呵呵呵呵呵呵呵呵',item)
								this.goodList = item;
								this.price = item.price_market;
								if (self.discount != null) {
									this.discountPrice = this.price * (this.discount.discount_ratio / 10);
									this.discountPrice2 = this.price - this.discount.discount_price;
								}

								this.number_sales = item.number_virtual;
								this.txt = '已选：';
							}
						});
					}
				} else {
					this.specSelected = data;
				}
			},
			addcard(id) {
				var self = this;
				if(self.dataList.number_stock == 0){
					self.$utils.showMsg('暂无库存')
					return;
				}
				if (this.numberValue == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择购买数量'
					});
					return;
				}
				if (this.specSelected.length != this.specList.length) {
					uni.showToast({
						icon: 'none',
						title: '规格未选择完整'
					});
					return;
				}
				// 这里是返回code为0,和其他那不一样
				self.$Request.post(self.$api.prodect.addToCart, {
						// goodsid: self.gid,
						goodsid: id,
						optionid: this.goodList.id,
						total: this.numberValue
					})
					.then(function(res) {
							// self.selType = !self.selType;
							//self.specClass = 'hide';
							self.$utils.showMsg(res.info)
							// setTimeout(function() {
							// 	self.getGoodsDetail();
							// }, 500);
							self.toggleSpec(self.num);
					},
					err => {
						console.log('err: ' + JSON.stringify(err));this.$utils.showMsg(err.data.info);
					});
			},
			// 跳转确认订单
			jump(url) {
				var self = this;
				if(self.dataList.number_stock == 0){
					self.$utils.showMsg('暂无库存')
					return;
				}
				if (this.numberValue == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择购买数量'
					});
					return;
				}
				if (this.specSelected.length != this.specList.length) {
					uni.showToast({
						icon: 'none',
						title: '规格未选择完整'
					});
					return;
				}
				//获取所有地址
				self.$Request.post(self.$api.address.addressList, {}).then(function(res) {
					var list = res.data;
					var item = [];
					var type = 0;
					if (list.length > 0) {
						// console.log(2233);
						for (let i = 0; i < list.length; i++) {
							if (list[i].is_default == 1) {
								item = list[i];
								type = 1;
							}
						}
						if (type == 0) {
							// console.log(22);
							item = list[0];
							type = 1;
						}
					}

					if (type == 1) {
						// console.log(111);
						uni.setStorageSync('addtime', 0);
						uni.setStorageSync('address', item);
						var goodsData = [];
						// console.log(self.dataList.id);
						// console.log(self.goodList.id);
						// console.log(self.numberValue);
						goodsData.push({
							goodsid: self.dataList.id,
							optionid: self.goodList.id,
							total: self.numberValue
						});
						uni.setStorageSync('goodData', goodsData);
						var goodsList = [];
						goodsList.push({
							goods: self.dataList,
							specdata: self.goodList,
							total: self.numberValue
						});
						self.toggleSpec(2);
						uni.setStorageSync('goodList', goodsList);
						uni.navigateTo({
							url: url
						});
					} else {
						uni.showModal({
							content: '你还没有设置收货地址，请先去设置收货地再购买！',
							cancelText: '取消',
							confirmText: '确认',
							confirmColor: '#FFAE00',
							cancelColor: '#D2D2D2',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/address/address'
									});
								}
							}
						});
					}
				});
			}
		}
	};
</script>
<style>
	/* page{
		position:fixed;
		 top:0;
		 height: 100%;
		 overflow: hidden;
	} */
</style>

<style lang="scss" scoped>
	.close-icon {
		position: relative;
	}

	.swiper-box {
		height: 100%;
	}

	.list-scroll-content {
		height: 1060upx;
		// background-color: red;
	}

	.commodity {
		position: relative;

		.swiper-section {
			width: 100vw;
			height: 754rpx;

			// padding: 0 20rpx;
			swiper {
				height: 754rpx;
			}

			.swiper-item {
				width: 100vw;
				height: 754rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.commodity-info {
			position: absolute;
			top: 678rpx;
			left: 0;
			width: 100vw;
			// height: 100%;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			background-color: #f4f4f4;

			.info-top {
				width: 100%;
				// height: 374rpx;
				background-color: #ffffff;
				border-radius: 30rpx 30rpx 0px 0px;

				.title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 20rpx 20rpx;

					.title {
						color: #000000;
						font-size: 36rpx;
						font-weight: bold;
						line-height: 1.3;
						display: flex;

						.num {
							background-color: #fff;
							color: #f81149;
							font-size: 30upx;
							margin-right: 30upx;
						}
					}

					image {
						width: 96rpx;
						height: 96rpx;
						margin-left: 104rpx;
					}
				}

				.subhead {
					width: 530rpx;
					color: #999999;
					font-size: 28rpx;
					line-height: 1.2;
					padding: 0 20rpx;
				}

				.price {
					padding: 0 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 26upx;

					&>view:nth-child(1) text:nth-child(1) {
						color: #f81149;
						font-size: 42rpx;
					}

					&>view:nth-child(2) text:nth-child(1) {
						color: #f81149;
						font-size: 32rpx;
					}

					&>view text:nth-child(2) {
						color: #f81149;
						font-size: 24rpx;
						margin: 0 26rpx 0 10rpx;
					}

					&>view text:nth-child(3) {
						color: #cccccc;
						font-size: 28rpx;
						vertical-align: center;
						text-decoration: line-through;
					}
				}

				.count {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #666666;
					margin-top: 30rpx;
					padding-bottom: 28upx;
				}
			}

			.info-intro {
				margin-top: 20rpx;
				background-color: #ffffff;
				padding: 20rpx 0;

				.type {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					&>view text:nth-child(1) {
						font-size: 28rpx;
						color: #666666;
						margin-right: 40rpx;
					}

					&>view text:nth-child(2) {
						font-size: 28rpx;
						color: #333333;
						margin-right: 40rpx;
					}

					&>view:nth-child(2) {
						image {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}

				&>view:nth-child(2) {
					padding: 20rpx 20rpx;
				}
			}

			.info-detail-evaluate {
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				border-top: 20rpx solid #f4f4f4;
				// margin-top: 20rpx;
				margin-bottom: 100rpx;
				position: absolute;

				.navbar {
					width: 100%;
					display: flex;
					height: 40px;
					padding: 0 5px;

					.nav-item {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
						font-size: 15px;
						color: #303133;
						position: relative;

						&.current {
							color: #f81149;

							&:after {
								content: '';
								position: absolute;
								left: 50%;
								bottom: 0;
								transform: translateX(-50%);
								width: 60px;
								height: 0;
								/* border-bottom: 2px solid #fa436a; */
								border-bottom: 6upx solid #f81149;
								border-radius: 4upx 4upx 0upx 0upx;
							}
						}
					}
				}

				.evaluate {
					padding: 20rpx;
					margin-bottom: 100rpx;

					.title {
						color: #333333;
						font-size: 30rpx;
						font-weight: bold;
					}

					.user-info {
						display: flex;

						.photo {
							margin-right: 20rpx;

							image {
								width: 74rpx;
								height: 74rpx;
								margin-top: 13rpx;
								border-radius: 50%;
							}
						}

						.info {
							width: 100%;

							.user-name {
								width: 100%;
								display: flex;
								justify-content: space-between;

								.name {
									color: #333333;
									font-size: 32rpx;
								}

								.time {
									color: #666666;
									font-size: 28rpx;
								}
							}

							.content {
								color: #666666;
								font-size: 28rpx;
							}

							.img {
								display: flex;
								align-items: center;
								margin-top: 10rpx;

								// width: 600upx;
								image {
									width: 192rpx;
									margin-right: 10upx;
									// width: 33.33%;
									height: 192rpx;
								}
							}

							.merchant {
								// width: 100%;
								height: 80rpx;
								line-height: 80rpx;
								// text-align: center;
								background: rgba(240, 238, 239, 1);
								color: #666666;
								font-size: 24rpx;
								margin-top: 20rpx;
								padding-left: 20upx;
								// margin-right: 20upx;
							}

							.add-comment {
								color: #f81149;
								text-align: right;
								margin-top: 10upx;
								margin-bottom: 10upx;
							}

							.comment-list {
								color: #666;
							}
						}
					}
				}
			}

			.btn {
				width: 100%;
				height: 100rpx;
				background-color: #ffffff;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1rpx solid rgba(204, 204, 204, 0.77);
				box-sizing: border-box;

				.conversion {
					// width: 480rpx;			//无购物车	
					width: 248rpx; //有购物车
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f81149;
					color: #ffffff;
				}

				.to {
					width: calc(750rpx - 500rpx);
					display: flex;
					align-items: center;
					justify-content: center;

					.home {
						flex: 1;

						&>view:nth-child(1) {
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 58rpx;
								height: 58rpx;
							}
						}

						&>view:nth-child(2) {
							color: #666666;
							font-size: 24rpx;
							text-align: center;
						}
					}
				}
			}
		}

		.info-rule {
			margin-top: 20rpx;
			margin-bottom: 20upx;
			width: 100vw;
			background-color: #ffffff;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 20rpx 0;

				&>view:nth-child(1) {
					color: #333333;
					font-size: 28rpx;
				}

				&>view:nth-child(2) {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.step {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 10rpx 40rpx 20rpx 40rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.info-group {
			width: 100vw;
			height: 510upx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 22upx 20upx;

			// margin-bottom: 20upx;
			.info-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 44upx 10upx;

				.group-img {
					display: flex;
					align-items: center;

					image {
						width: 80upx;
						height: 80upx;
						margin: 0 10upx;
					}
				}

				.group-more {
					display: flex;
					align-items: center;
					color: #666666;

					image {
						width: 40upx;
						height: 40upx;
					}
				}
			}

			.start {
				width: 100vw;
				text-align: center;
				color: #35393b;
				font-size: 30upx;
				font-weight: bold;

				&>text {
					color: #ff3333;
				}
			}

			.invite {
				// width: 620upx;
				// height: 100upx;
				// background: linear-gradient(90deg, rgba(255, 153, 51, 1) 0%, rgba(255, 102, 51, 1) 100%);
				// border-radius: 10upx;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				// color: #fff;
				// font-size: 36upx;
				// margin: 52upx auto 0 auto;

				image {
					width: 58upx;
					height: 48upx;
					margin-right: 10upx;
				}
			}
		}
	}

	.ele {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: -1000;

		.box {
			width: 100vw;
			height: 855rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			border-radius: 30rpx 30rpx 0px 0px;
			transform: translateY(120%);
			transition: all 0.3s linear;

			.photo {
				image {
					width: 286rpx;
					height: 296rpx;
					position: absolute;
					top: -64rpx;
					left: 20rpx;
				}

				.price {
					position: absolute;
					left: 334rpx;
					top: 112rpx;

					&>view:nth-child(1) {
						color: #f81149;
						font-size: 48rpx;
					}

					&>view:nth-child(2) {
						color: #333333;
						font-size: 24rpx;
					}
				}
			}

			.type {
				margin: 274rpx 20rpx 15rpx 20rpx;
				overflow: auto;
				height: 300upx;

				.title {}

				.name {
					display: flex;
					flex-wrap: wrap;
					margin-left: 10upx;
					// justify-content: space-between;

					.active {
						border: 1rpx solid rgba(233, 144, 64, 1);
						color: #f81149;
					}

					&>view {
						height: 68rpx;
						line-height: 68rpx;
						padding: 0 30rpx;
						border: 1rpx solid rgba(204, 204, 204, 1);
						border-radius: 35rpx;
						font-size: 24rpx;
						margin: 15rpx 0;
					}
				}
			}

			.count {
				padding: 50rpx 20rpx 0 20rpx;
				display: flex;
				justify-content: space-between;

				.num {
					display: flex;
					justify-content: center;
					align-items: center;

					&>view {
						width: 82rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: rgba(236, 236, 236, 1);
						border-radius: 20rpx;
						margin: 0 10rpx;
					}
				}
			}

			.btn {
				width: 700rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(-90deg, rgba(242, 44, 4, 1) 0%, rgba(234, 141, 63, 1) 100%);
				border-radius: 40rpx;
				color: #ffffff;
				font-size: 36rpx;
				position: absolute;
				bottom: 38rpx;
				left: 25rpx;
			}
		}

		.active {
			transform: translateY(0) !important;
		}
	}

	.block {
		z-index: 1000;
	}

	.group-rule {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;

		.box {
			width: 536rpx;
			height: 788rpx;
			background-color: #ffffff;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -268rpx;
			margin-top: -394rpx;
			border-radius: 10rpx;

			.title {
				width: 100%;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				background-color: #ffb46a;
				color: #000000;
				font-size: 32rpx;
				border-radius: 10rpx 10rpx 0 0;
			}

			.content {
				padding: 0 28rpx 40rpx 28rpx;
				display: flex;

				.img {
					width: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.state {
					margin-left: 20rpx;

					.state-box {
						margin-top: 36rpx;

						.state-type {
							color: #333333;
							font-size: 24rpx;
						}

						.state-explain {
							color: #999999;
							font-size: 20rpx;
							line-height: 30rpx;
						}
					}
				}
			}

			.know {
				text-align: center;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.group {
		display: flex;
		justify-content: space-between;
		margin: 60upx 50upx 0;
		font-size: 36upx;

		// text-align: center;
		// align-items: center;
		.group-list {
			width: 305upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(51, 51, 51, 1);
			border-radius: 10upx;
			color: #333;
			margin-right: 42upx;
		}

		.invite {
			width: 305upx;
			height: 88upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(90deg, rgba(255, 153, 51, 1) 0%, rgba(255, 102, 51, 1) 100%);
			border-radius: 10upx;
			color: #fff;
			// width: 620upx;
			// height: 100upx;
			// background: linear-gradient(90deg, rgba(255, 153, 51, 1) 0%, rgba(255, 102, 51, 1) 100%);
			// border-radius: 10upx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			// color: #fff;
			// font-size: 36upx;
			// margin: 52upx auto 0 auto;
		}
	}

	/deep/uni-swiper .uni-swiper-dots-horizontal {
		bottom: 50px;
	}

	// 查看更多
	.more-info {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;

		.group-info {
			border-radius: 20upx;
			width: 630rpx;

			max-height: 788rpx;
			background-color: #ffffff;
			position: absolute;
			top: 50%;
			left: 50%;
			// margin-left: -315rpx;
			// margin-top: -394rpx;
			transform: translate(-50%, -50%);

			.group-more {
				border-radius: 20rpx;
				background-color: #fff;
				position: relative;

				.title {
					border-bottom: 1px solid #f4f4f4;
					height: 130upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36upx;
					font-weight: bold;
					color: #2e2a2a;
				}
			}

			.group-list {
				max-height: 560upx;
				overflow: scroll;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				border-bottom: 1px solid #f4f4f4;
				padding: 20upx 0;
				margin: 0 20upx;

				.list-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f4f4f4;
					padding: 20upx 0;

					image {
						width: 80upx;
						height: 80upx;
						border-radius: 20upx;
					}

					.name {
						display: flex;
						flex-direction: column;
						margin-left: 20upx;

						.name1 {
							color: #2e2a2a;
						}

						.name2 {
							color: #f81149;
							margin-left: 20upx;
						}

						.time {
							display: flex;
							flex-direction: row;
							font-size: 24upx;
							color: #666;
						}
					}
				}
			}
		}
	}

	.group-shopping {
		background: linear-gradient(90deg, rgba(255, 153, 51, 1) 0%, rgba(255, 102, 51, 1) 100%);
		border-radius: 10upx;
		width: 120upx;
		height: 46upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.close {
		width: 54upx;
		height: 54upx;
		position: absolute;
		right: -10upx;
		top: -20upx;

		.close-img {
			width: 54upx;
			height: 54upx;
		}
	}

	.rebate {
		background: rgba(255, 247, 238, 1);
		border-radius: 3upx;
		color: #f81149;
		padding: 14upx;
		margin-left: 22upx;
	}

	.discount-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 232, 205, 1);
		border-radius: 5upx;
		padding: 22upx;
		margin: 44upx 22upx 0;
		color: #ff7f00;
	}

	.discount {
		padding: 0 20upx;
		font-size: 24upx;
	}

	.discount1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail {
		margin-bottom: 50upx;
	}

	.not-data {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20upx;
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				width: 80%;
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background-color: #f81149;
				// background: linear-gradient(-90deg, rgba(242, 44, 4, 1) 0%, rgba(234, 141, 63, 1) 100%);
				// font-size: $font-base + 2upx;
				color: #fff;
				font-size: 36rpx;
				margin: 30upx auto 20upx;
				margin-right: 100upx;

				// width: 700rpx;
				// height: 80rpx;
				// line-height: 80rpx;
				// text-align: center;
				// background: linear-gradient(-90deg, rgba(242, 44, 4, 1) 0%, rgba(234, 141, 63, 1) 100%);
				// border-radius: 100upx;
				// color: #ffffff;
				// font-size: 36rpx;
				// position: absolute;
				// bottom: 38rpx;
				// left: 25rpx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				// font-size: $font-sm + 2upx;
				// color: $font-color-base;
				line-height: 42upx;

				.price {
					// font-size: $font-lg;
					// color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			// font-size: $font-base + 2upx;
			// color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				// font-size: $font-base;
				// color: $font-color-dark;
			}

			.selected {
				background: #f81149;
				color: #fff;
				// color: $uni-color-primary;
			}
		}
	}

	.logo-img {
		width: 100upx;
		height: 100upx;
		background: #ffffff;
	}

	.num-value {
		margin-top: 40upx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		align-items: center;
	}

	.num-value {
		margin-right: 40upx;
	}

	.discountPrice {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 20upx;
		background: #ffe7cd;
		// border:2upx solid rgba(232, 139, 45, 0.77);
		// border-radius:0px 30upx 0px 30upx;
		padding: 17upx 30upx;
		color: #fb7d00;
		font-size: 28upx;
	}

	.conversion1 {
		width: 500rpx;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f81149;
		color: #ffffff;
	}

	.store-icon {
		transform: scale(.62);
	}

	/deep/ img {
		display: block;
	}

	// 优惠券
	.popup1 {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.cancel {
		width: 687upx;
		height: 145upx;

		background: #F4F4F4;
		position: fixed;
		bottom: 0;

		view {
			height: 100upx;
			line-height: 100upx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 12upx;
			text-align: center;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.shade {
		width: 100%;
		height: 700upx;
		overflow: scroll;
		min-height: 40vh;
		background: #F4F4F4;
		position: fixed;
		bottom: 0;
		z-index: 99;
		padding-bottom: 60px;
	}

	.list-scroll-content {
		height: 100%;
	}

	.list {
		padding: 30upx;

		.box {
			width: 690upx;
			height: 194upx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 12upx;
			margin-bottom: 30upx;

			.content {
				display: flex;
				justify-content: space-around;

				.box-left,
				.box-left1,
				.box-left2 {
					width: 212upx;
					height: 194upx;
					background: #F81149;
					box-shadow: 3upx 0px 8upx 1px #FCE1E8;
					border-radius: 12upx 0px 0px 12upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.icon {
						margin-top: 20upx;
						height: 49upx;
						font-size: 40upx;
						// font-weight: bold;
						color: #FFFFFE;
						line-height: 59upx;
						text-align: center;
					}

					.num {
						font-size: 80upx;
						font-weight: bold;
						color: #FFFFFE;
						line-height: 72upx;
					}

				}

				.box-left1 {
					background: #c1c1c1;
				}

				.box-left2 {
					background: #F86A8C;
				}


				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.box-center {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-right: 20upx;

					.text {
						font-weight: bold;
						color: #242424;
						font-size: 36upx;
						margin-bottom: 10upx;
					}

					.time {
						font-size: 24upx;
						color: #999999;
						transform: scale(0.9);
					}
				}

				.box-right {
					display: flex;
					align-items: center;
					justify-content: center;

					.text,
					.text1,
					.text2 {
						width: 140upx;
						height: 58upx;
						background: #FFFFFF;
						border: 2upx solid #F81149;
						border-radius: 29upx;
						text-align: center;
						margin-right: 22upx;
						font-size: 32upx;
						font-weight: 500;
						color: #F81149;
						text-align: center;
					}

					.text1 {
						border: 2upx solid #C1C1C1;
						color: #C1C1C1;
					}

					.text2 {
						border: 2upx solid #F86A8C;
						color: #F86A8C;
					}
				}
			}
		}
	}

	// 优惠券
	.discount-bg {
		background-image: url(../../static/img/bg.png);
		background-size: 100% 100%;
		width: 100upx;
		height: 36upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		margin-right: 20upx;
	}

	.icons {
		font-size: 12px;
	}

	.container {
		position: fixed;
		top: 0;
		height: 100%;
		overflow: hidden;
	}
</style>
